<template>
<!-- - v-for="(值变量, 索引变量) in 目标结构"
-       v-for="值变量 in 目标结构" -->
<!-- 想有多少个谁就在谁上遍历 -->
<!-- 绑定key值  有id用id 没id用下标  key值不能是对象, 只能是数字或者字符串是唯一的 -->
  <div>
    <ul>
      <li v-for="(item, index) in arr" :key="index">{{item}} ---- {{index}}</li>
    </ul>
    <p v-for="val in stuArr" :key="val.id">
      姓名:{{val.name}}--- 性别: {{val.sex}} -- 真会玩: {{val.hobby}}
    </p>
    <!-- 下面不太常用 -->
    <!-- 对象 -->
    <div v-for="(val, key) in obj" :key="val">
      {{val}} --- {{key}}
    </div>
    <!-- 数字 -->
    <p v-for="item in num" :key="item">{{item}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: ['牛善文', '李文卓', '李子恒','徐超晨','衡然'],
      stuArr:[
        {
          id: 1,
          name: '牛善文',
          sex: '不详',
          hobby: '妹子'
        },
        {
          id: 2,
          name: '李文卓',
          sex: '男',
          hobby: '就玩游戏,敲代码'
        },
        {
          id: 3,
          name: '徐超晨',
          sex: '中性',
          hobby: '通吃'
        },
      ],
      obj: {
        name:'宋晓阳',
        hobby: '牛善文',
        sex: '不详'
      },
      num: 10
    }
  }
}
</script>

<style>

</style>